Visor (ampliación) de imágenes

Recuerdo que hace bastante tiempo un código tuvo mucha aceptación, se trataba de ampliar imágenes, con un añadido en los CSS podíamos configurar el tamaño y borde de la imagen. Sin embargo al ser añadido en la sidebar la ampliación no era completa.

Vagabundia ha descubierto este script de DynamicDrive , se trata de Image Thumbnail Viewer una rutina que carga la imagen con efecto de ampliación independientemente del lugar donde se añade mostrándose en la misma ventana que estamos visualizando.

Ejemplo

La aplicación es muy sencilla y el efecto extraordinario ya que nos permite personalizarlo 100%100.
Una vez tengamos todo instalado solamente tendremos que preocuparnos de añadir el atributo rel="thumbnail" al enlace donde deseamos ampliar una imagen.

Lo primero que haremos será descargar el archivo thumbnailviewer.js que más tarde editaremos de acuerdo al efecto deseado en la ventana.
Luego abrimos el bloc de notas, y buscaremos el archivo descargado, lo abriremos... y encontráremos algo así:

// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Jan 22nd, 2007
// -------------------------------------------------------------------

var thumbnailviewer={
enableTitle: true, // (si se quieren agregar textos como descripciones, si no se desea poner false)
enableAnimation: true, // (poner false si se quiere deshabilitar el efecto fade)
definefooter: '<div class="footerbar">CERRAR</div>', // (poner el texto que se quiera)
defineLoading: '<img src="http://img457.imageshack.us/img457/2554/loadingqi6.gif" />', // (la imagen de carga puedes sustituirla por otra)

Una vez modificado a nuestro gusto guardamos los cambios y alojamos el archivo en un servidor.
Ahora vamos a establecer las propiedades CSS de la ventana, hay dos métodos. El primero es bajar el archivo thumbnailviewer.css editarlo y subirlo a nuestro servidor.De esa forma tendremos los dos archivos alojados la hoja de estilo CSS y el script.

En la plantilla antes de </head> añadiremos lo siguiente:

<link rel="stylesheet" href="URL_thumbnailviewer.css" type="text/css" />
<script src="URL_thumbnailviewer.js" type="text/javascript"></script>

Solamente nos quedará buscar la url de nuestros archivos alojados y añadirla en el anterior código.

El segundo método sería pegar en la plantilla el contenido del estilo de la CSS en lugar de alojarlo en un servidor, aparentemente nos evita tener que subirlo pero eso no es lo mejor. Lo mejor es que de esta forma podemos modificarlo cuantas veces deseemos sin necesidad de abrir el archivo y volver a alojarlo.

Si deseamos este segundo método justo antes de </head> añadimos lo siguiente:

<style type="text/css">

/* este es el rectángulo total de la ventana */
#thumbBox {
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px; /* el ancho del borde */
padding-bottom: 0;
background: #313131; /* el color de fondo */
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}
/* este es el rectángulo del pie de página */
#thumbBox .footerbar {
/* propiedades del texto "CERRAR" */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
/* propiedades que podemos agregar: background-color, border */
}
/* es el rectángulo interior que contendrá la imagen y el eventual título */
#thumbBox #thumbImage {
background-color: white; /* el color de fondo */
/* podemos agregar otras propiedades, por ejEMplo, para las fuentes de los textos */
}
/* es la advertencia de carga que se muestra antes de abrirse la ventana */
#thumbLoading {
position: absolute;
visibility: hidden;
border: 1px solid black; /* el borde */
background-color: #EFEFEF; /* el color de fondo */
padding: 5px; /* márgenes */
z-index: 5;
/* podemos agregar otras propiedades para las fuentes, etc */
}
</style>

Seguido de esa porción de código añadiremos:

<script src="URL_thumbnailviewer.js" type="text/javascript">

Para hacer el trabajo más sencillo y saber qué estamos modificando J.Miur ha creado una imagen que (sigilosamente le he tomado prestada)
Ya solo queda el último paso para ver el efecto de la imagen y es añadir el atributo rel="thumbnail" en nuestros enlaces.

¿Cómo lo hacemos? Un enlace normal lo creamos de esta forma:
<a href="url-de-la-imagen">texto-que-enlaza</a>

Y van los ejemplos (esta parte es lo que más me gusta)

Enlazar un texto

<a href="url-de-la-imagen" rel="thumbnail" title="texto en la imagen">texto que enlaza</a>

Resultado:
Este texto es un enlace

Enlazar una imagen

<a href="url-de-la-imagen-ampliada" rel="thumbnail" title="texto en la imagen"><img src="url-de-la-imagen-que-mostramos" /></a>

Resultado:

Mi agradecimiento a Vagabundia por la información.